<template>
  <div>
    <h1>子组件</h1>
    <span v-for="(item,index) in list" :key="index">{{item}}
      <button @click="del(index)">X</button>
    </span>
    <input v-focus @keydown.esc="isShow=false" v-model="name" @keyup.enter="add(name)"  v-if="isShow" type="text" placeholder="请输入你的任务">
    <button v-else class="btn" @click="isShow=true">+New Tag</button>

  </div>
</template>

<script>
export default {
  props:['list'],
  data () {
    return {
      name:'',
      isShow: false,
    }
  },
  methods: {
    add (name) {
      this.list.push(name)
        this.name = ''
        this.isShow = false

    },
    del (index) {
      this.list.splice(index,1)
    },

  },
  directives: {
    focus: {
      inserted (el) {
        el.focus()
      }
    }
  }
}
</script>

<style scoped>
button{
  border:0px;
  background:none;
  color:#247ffc;
}
span{
  display:inline-block;
  margin-right:10px;
  border:1px solid #247ffc;
  width:80px;
  height:30px;
  line-height: 30px;
  text-align: center;
  border-radius: 5px;
  color:#247ffc;

}
.btn{
  display:inline-block;
  margin-right:10px;
  border:1px solid #000;
  width:80px;
  height:50px;
  line-height: 30px;
  text-align: center;
  color:#000;
  border-radius: 5px;
}
</style>